<template>
  <div>
    <a-alert message="G2Plot" type="info" show-icon style="margin-bottom: 18px">
      <template #description>
        G2Plot 开箱即用的图表库：<a href="https://antv-g2plot.gitee.io/zh/" target="_blank">
          文档
        </a>
      </template>
    </a-alert>
    <div class="account-settings-info-main">
      <a-row type="flex" :gutter="4">
        <a-col :span="12">
          <div class="charTitle">不同年龄销售额</div>
          <div id="userAge"></div>
        </a-col>
        <a-col :span="12">
          <div class="charTitle">销售额类别占比</div>
          <div id="salesRate"></div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="12">
          <div class="charTitle">月销售额</div>
          <div id="salesMonth"></div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts">
import { IconFont } from '@/components/iconfont'
import { defineComponent, reactive, toRefs, onMounted, nextTick } from 'vue'
import { Row, Col } from 'ant-design-vue'
import { UploadOutlined, PaperClipOutlined } from '@ant-design/icons-vue'
import { getPageData } from '@/api/analysis'
import { Chart, Util } from '@antv/g2'

export default defineComponent({
  name: 'Analysis',
  components: {
    IconFont,
    UploadOutlined,
    PaperClipOutlined,
    [Row.name]: Row,
    [Col.name]: Col
  },
  setup() {
    const state = reactive<any>({
      userAge: [],
      salesRate: [],
      salesMonth: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    })
    function initUserAge() {
      const chart = new Chart({
        container: 'userAge',
        autoFit: true,
        height: 300,
        padding: [50, 20, 50, 20]
      })
      chart.data(state.userAge)
      chart.scale('value', {
        alias: '销售额(万)'
      })

      chart.axis('type', {
        tickLine: {
          alignTick: false
        }
      })
      chart.axis('value', false)

      chart.tooltip({
        showMarkers: false
      })
      chart.interval().position('type*value')
      chart.interaction('element-active')
      // 添加文本标注
      state.userAge.forEach((item) => {
        chart
          .annotation()
          .text({
            position: [item.type, item.value],
            content: item.value,
            style: {
              textAlign: 'center'
            },
            offsetY: -30
          })
          .text({
            position: [item.type, item.value],
            content: (item.percent * 100).toFixed(0) + '%',
            style: {
              textAlign: 'center'
            },
            offsetY: -12
          })
      })
      chart.render()
    }
    function initSalesRate() {
      const chart = new Chart({
        container: 'salesRate',
        autoFit: true,
        height: 300
      })
      chart.data(state.salesRate)
      chart.coordinate('theta', {
        radius: 0.75
      })
      chart.tooltip({
        showMarkers: false
      })

      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060'])
        .style({ opacity: 0.4 })
        .state({
          active: {
            style: (element) => {
              const shape = element.shape
              return {
                matrix: Util.zoom(shape, 1.1)
              }
            }
          }
        })
        .label('type', (val) => {
          const opacity = val === '四线及以下' ? 1 : 0.5
          return {
            offset: -30,
            style: {
              opacity,
              fill: 'white',
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)'
            },
            content: (obj) => {
              return obj.type + '\n' + obj.value + '%'
            }
          }
        })

      chart.interaction('element-single-selected')
      chart.render()
    }
    function initSalesMonth() {
      const chart = new Chart({
        container: 'salesMonth',
        autoFit: true,
        height: 300
      })
      chart.data(state.salesMonth)
      chart.scale({
        month: {
          range: [0, 1]
        },
        value: {
          min: 0,
          nice: true,
          alias: '销售额(万)'
        }
      })

      chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        shared: true
      })
      chart.line().position('month*value').label('销售额(万)')
      chart.point().position('month*value')

      chart.theme({
        styleSheet: {
          brandColor: '#025DF4',
          paletteQualitative10: [
            '#025DF4',
            '#DB6BCF',
            '#2498D1',
            '#BBBDE6',
            '#4045B2',
            '#21A97A',
            '#FF745A',
            '#007E99',
            '#FFA8A8',
            '#2391FF'
          ],
          paletteQualitative20: [
            '#025DF4',
            '#DB6BCF',
            '#2498D1',
            '#BBBDE6',
            '#4045B2',
            '#21A97A',
            '#FF745A',
            '#007E99',
            '#FFA8A8',
            '#2391FF',
            '#FFC328',
            '#A0DC2C',
            '#946DFF',
            '#626681',
            '#EB4185',
            '#CD8150',
            '#36BCCB',
            '#327039',
            '#803488',
            '#83BC99'
          ]
        }
      })
      chart.render()
    }

    onMounted(() => {
      getDataList()
    })
    function getDataList() {
      getPageData({}).then((res) => {
        for (let item in res) {
          state[item] = res[item]
        }
        console.log(state)
        nextTick(() => {
          initUserAge()
          initSalesRate()
          initSalesMonth()
        })
        console.log(res)
      })
    }
    return {
      ...toRefs(state),
      initUserAge,
      initSalesRate,
      initSalesMonth,
      getDataList
    }
  }
})
</script>

<style lang="scss" scoped>
.charTitle {
  margin-bottom: 30px;
  font-size: 16px;
}
</style>
